<template>
    <!-- 随堂练习批阅 -->
    <div id="statistics-class-exercises">
        随堂练习统计
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                <div class="clearfix">
                    <span class="fl preview-title">{{ courseName }}</span>
                    <span class="fl preview-line">/</span>
                    <span :title="chapterName" style="max-width:160px;" class="fl beyond-hiding">{{ chapterName }}</span>
                    <span class="fl">{{ className }}</span>
                </div>
                </div>
            </div>
        </div>
        <div v-show="!isNoShenpi">
            <div class="btn2-box">
                <div class="button-style2" @click="paiming" style="margin-right:10px;">
                    <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
                    当前排名
                </div>
                <div class="button-style2" @click="downLoads">
                    数据统计
                    <i class="iconfont icon-tubiaozhizuo-"></i>
                </div>
            </div>
            <div class="jx-content">
                <div>
                    <div class="row-title">
                        <span>班级分数统计&nbsp;&nbsp;&nbsp;&nbsp;<span v-if="resData" style="font-size:14px;">随堂练习提交数{{ resData[0].count }}</span></span>
                        <span v-if="resData" class="blue">
                            <el-tooltip class="item" effect="dark" content="该平均分为已批阅的学生平均分数" placement="bottom">
                                <i  class="iconfont icon-wenti-m"></i>
                            </el-tooltip>
                            平均分：{{ resData[0].avg }}分
                        </span>
                    </div>
                    <div id="mychartBar" style="width: 1100px;height:400px;"></div>
                </div>
                <br/>
                <div v-show="isPaiming">
                    <div class="row-title">当前排名</div>
                    <div v-if="resData">
                        <el-table
                            :data="resData"
                            style="width: 100%">
                            <el-table-column
                                label="排名"
                                width="180">
                                <template slot-scope="scope">
                                    <div>第{{ scope.row.rank+1 }}名</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="userName"
                                label="姓名">
                            </el-table-column>
                            <el-table-column
                                prop="score"
                                width="180"
                                label="得分">
                            </el-table-column>
                        </el-table>
                        <br/>
                    </div>
                </div>
            </div>
<!-- 题 -->
            <div class="jx-content preview-content" id="question-content" v-if="resQuestionData">
                <div v-for="(item,index) in resQuestionData.readingList" :key="index" style="margin-top: 40px;">
                    <!-- 题型标题：一、选择题（每题1分，共2题） -->
                    <h2 class="tq-title">
                        {{ questionNumber[index] }}、{{ item.typeName }}(共{{ item.questionList.length }}题)
                    </h2>
                    <dl v-for="(item2,index2) in item.questionList" :key="index2">
                        <dt class="markdown-body">
                            <!-- 题型中序号 1.xxxx -->
                            {{ index2+1 }}、
                            <!-- 题目内容 -->
                            <span v-html="item2.content"></span>
                            <!-- 选择题 单选多选 -->
                            <span v-if="item.type == 1">
                                <span v-if="!item2.isMultipleChoice">[单选题]</span>
                                <span v-if="item2.isMultipleChoice">[多选题]</span>
                            </span>
                            

                            <!-- 选择题选项 -->
                            <span style="display:flex;" v-if="item.type === 1">
                                <span style="color:#333;" v-if="item.type === 1">
                                    <span v-for="(choiceListItem,choiceListIndex) in item2.choiceList" :key="choiceListIndex">
                                        <div style="display:flex;">
                                            <span style="min-width:26px;">{{ qKey[choiceListIndex] }}、</span>
                                            <span v-html="choiceListItem"></span>
                                        </div>
                                    </span>
                                </span>
                            </span>
                            <!-- 选择题正确答案 -->
                            <span style="display:flex;" v-if="!item2.right && item.type === 1">
                                <span class="c-blue" style="min-width:70px;">正确答案：</span>
                                <span style="color:#333;" v-if="item.type === 1">
                                    <span v-for="(choiceListItem,choiceListIndex) in item2.choiceList" :key="choiceListIndex">
                                        <div style="display:flex;" v-if="item2.rightAnswer.includes(choiceListIndex)">
                                            <span style="min-width:26px;">{{ qKey[choiceListIndex] }}、</span>
                                            <span v-html="choiceListItem"></span>
                                        </div>
                                    </span>
                                </span>
                            </span>
                            <!-- 非选择题正确答案 -->
                            <div v-if="!item2.right && item.type !== 1 && item.type !== 7">
                                <span class="c-blue">正确答案：</span>
                                <!-- 判断题映射 正确 错误 -->
                                <span v-if="item.type === 2">{{ judgekey[item2.rightAnswer-0] }}</span>
                                <span v-else v-html="item2.rightAnswer"></span>
                            </div>
                            <div class="analysis-box" v-if="item2.jxContentHtml">
                                <br />
                                <span class="analysis-title">答案解析：</span>
                                <div class="analysis-content" v-html="item2.jxContentHtml"></div>
                            </div>
                            <!-- 回答人数正确率 -->
                            <div class="answerCount-content">
                                <div class="answerCount-box">
                                    <div class="answerCount-hd">回答人数：<span class="bold">{{ item2.answerCount }}</span>/{{ item2.allStudent }}</div>
                                    <div v-if="item.type<4">
                                        正确率：{{ item2.accuracy }}%
                                    </div>
                                    <div v-if="item.type<4" class="answerCount-progress">
                                        <el-progress :stroke-width="8" :show-text="false" :percentage="item2.accuracy-0"></el-progress>
                                    </div>
                                </div>
                            </div>
                        </dt>
                    </dl>
                </div>
            </div>
<!-- 题 end -->
        </div>
        <div v-show="isNoShenpi" class="nodata-box">
            {{ isNoShenpi }}
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import * as echarts from 'echarts';
    import $ from "jquery";
    //导出word
    import "../../../../static/wordExport/jquery.wordexport";
    export default {
        data() {
            return {
                //暂无审批记录
                isNoShenpi:'',
                //班级id
                classId: this.$route.query.classId,
                // 课程ID
                 courseId: this.$route.query.courseId,
                //章节id
                chapterId: this.$route.query.chapterId,
                //类似学生id
                checkingId: this.$localstorage.getLocalStorage("checkingId"),
                //课程名称
                courseName: this.$route.query.courseName,
                //章节名称
                chapterName: this.$route.query.chapterName,
                //班级名称
                className: this.$route.query.className,
                paramsData: {},
                //接收的题目列表
                resData: "",
                //发送的数据
                //reqData:'',
                //选择题
                questionList1: null,
                //判断题
                questionList2: null,
                //填空题
                questionList3: null,
                //简答题
                questionList4: null,
                //编程题
                questionList5: null,
                qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
                judgekey: ["错误", "正确"],
                questionNumber: ["一", "二", "三", "四", "五", "六"],
                questionName: [
                    {
                        type: 1,
                        name: "选择题"
                    },
                    {
                        type: 2,
                        name: "判断题"
                    },
                    {
                        type: 3,
                        name: "填空题"
                    },
                    {
                        type: 4,
                        name: "简答题"
                    },
                    {
                        type: 5,
                        name: "编程题"
                    },
                    {
                        type: 6,
                        name: "实验题"
                    }
                ],

                inputStatus: true,
                resQuestionData:'',
                isPaiming:false,
            };
        },
        created() {
            let self = this
            self.courseId = this.$localstorage.getLocalStorage("setCourseId")
        },
        mounted() {
            this.init();
            this.statistics();
            //this.viewFu();
        },
        methods: {
            //当前排名
            paiming(){
                this.isPaiming = !this.isPaiming;
            },
            //下载
            downLoads() {
                let self = this;
                console.log(self.resData,111);
                let obj = {
                    pass:self.resData[0].pass,
                    studyAndVideoTime:self.resData[0].studyAndVideoTime
                };
                self.$http
                    .post(
                        //courseId, chapterId, classId
                        ///course/{courseId}/export/practice
                    "/tes/course/"+
                    self.courseId
                    +"/export/practice?courseName="+
                    self.courseName
                    +"&chapterName="+
                    self.chapterName
                    +"&className="+
                    self.className
                    +"&courseId="+
                    self.courseId
                    +"&chapterId="+
                    self.chapterId
                    +"&classId="+
                    self.classId,
                    {},
                    { responseType: "blob" }
                    )
                    .then(response => {
                    console.log(response,1234);
                    let contentType = response.headers["content-type"];
                    //console.log(contentType);
                    //console.log(response.headers["code-message"]);
                    if (contentType == "application/json;charset=UTF-8") {
                        self.$message.error(response.headers["code-message"]);
                    } else {
                        let blob = new Blob([response.data], {
                        type: response.headers["content-disposition"]
                        });
                        let fileName = self.className + "随堂练习统计.xls";
                        let url = window.URL.createObjectURL(blob);
                        let downloadElement = document.createElement("a");
                        downloadElement.style.display = "none";
                        downloadElement.href = url;
                        downloadElement.download = fileName; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(url);
                    }
                    })
                    .catch(err => {
                    console.log(err);
                    });
            },
            //绘图
            drawChart(res){
                let self = this;
                console.log(res,223344);
                let xData = res.map(item => item.userName);
                let serData = res.map(item => item.score);
                let rankData = res.map(item => item.rank);
                console.log(xData,serData,rankData);
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('mychartBar'));
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        //text: 'ECharts 入门示例'
                    },
                    tooltip: {
                        trigger:'axis',
                        formatter : function(param){
                            let index = param[0].dataIndex;
                            let name = '姓名：' + param[0].axisValue;
                            let score = '分数：' + param[0].value + '分';
                            let rank = '名次：第' + (rankData[index] + 1) + '名';
                            return name + '<br/>' + score + '<br/>' + rank;
                        },
                    },
                    dataZoom:[
                        {
                            type:'inside'
                        },
                        {
                            type:'slider',
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }
                    ],
                    legend: {
                        //data:['销量']
                    },
                    xAxis: {
                        name:'',
                        data: xData
                    },
                    yAxis: {
                        name:"分数"
                    },
                    
                    series: [{
                        type: 'bar',
                        data: serData,
                        itemStyle:{
                            color:'#29a4fa'
                        },
                        emphasis:{
                            itemStyle:{
                                color:'#117eca'
                            },
                        },
                        markLine : {
                        　　data : [
                        // 　　　　{
                        //             type : 'average', 
                        //             name: '平均分',
                        //             label:{
                        //                 formatter :"{b}:"+ res[0].avg +"分"
                        //             }
                        //         },
                                {
                                    silent:false,  
                                    label:{
                                        formatter:"平均分:" + res[0].avg +"分",
                                    },
                                    yAxis:res[0].avg           // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                            
                                }
                        　　]
                        }
                    }]
                };
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.hideLoading();
            },
            //随堂练习统计图形和表格数据
            statistics() {
                var self = this;
                let myChart = echarts.init(document.getElementById('mychartBar'));
                myChart.showLoading({
                    text: '数据正在加载...',
                });
                axios.get(
                    "/tes/course/"+ this.$localstorage.getLocalStorage("setCourseId") + "/student/base-statistics/" + self.chapterId + "/" + self.classId 
                    + "/Statistics?pageSize=null&currentPage=null"
                    ).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            console.log(res,222);
                            self.resData = res.data.data;
                            self.drawChart(res.data.data);
                        }
                        else if(res.data.code == 100109){
                            self.isNoShenpi = res.data.message;
                        }
                        else {
                            self.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
//题
            init() {
                this.getPaper(this.$localstorage.getLocalStorage("checkingId"));
            },
            //选择题多选是否填写
            isChoseNull(item2, index2) {
                //是数组
                if (item2.userAnswer instanceof Array) {
                    console.log(!item2.userAnswer.length)
                    return !item2.userAnswer.length;
                } else {
                    //不是数组
                    console.log(item2.userAnswer && item2.userAnswer !== "empty")
                    // return item2.userAnswer 
                    return true
                }
            },
            //限制input框只能输入正整数 并且不能超出指定分数
            provingCount(item, prop, row) {
                let self = this;
                //限制输入数字
                // console.log(item[prop], 55);
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);
                // console.log(isInt, 66);
                if (!isInt) {
                    item[prop] = "";
                    self.$message.warning("只能输入整数");
                }
                if (item[prop] > 999) {
                    item[prop] = "";
                    self.$message.warning("分数不能超过三位数");
                }

            },
            //获取试题
            getPaper(checkingId) {
                var self = this;
                let courseId = self.courseId;
                let chapterId = self.chapterId;
                let classId = self.classId;
                axios.get(
                //"/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/type/1/class/" + self.classId + "/chapter/" + self.chapterId + "/student/" + checkingId
                `/tes/course/${courseId}/chapter/${chapterId}/practice/accuracyStatistics?classId=${classId}`
                ).then(function(res) {
                // console.log("成功");
                // console.log(res, 110);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            console.log(666);
                            console.log(res.data);
                            //滚动条置顶
                            //$("html,body").scrollTop(0);
                            //替换填空题括号
                            //填空题替换(+)为（）
                            let fillQuestion = res.data.data.readingList.find(
                                item => item.type === 3
                            );
                            if (fillQuestion) {
                                let content = fillQuestion.questionList;
                                $.each(content, function(i, d) {
                                    let str = d.content;
                                    var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                                    d.content = result;
                                });
                            }
                            self.resQuestionData = res.data.data;
                        } else {
                            self.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //提交批阅
            submitMarking() {
                var self = this;
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/type/1/class/" + self.classId + "/chapter/" + self.chapterId + "/student/" + self.$localstorage.getLocalStorage("checkingId"),self.resData).then(function(res) {
                    // console.log("成功");
                    // console.log(res);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            self.$message({
                                message: "提交成功",
                                type: "success"
                            });
                        } else {
                            self.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //上一份
            prevMarking() {},
            //下一份
            nextMarking() {}
//题 end
        }
    };
</script>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    body {
        background: #f8f8f8;
    }
    #statistics-class-exercises {
        .btn2-box{
            width:1200px;
            margin: 0 auto 20px;
            text-align: right;
        }
        .button-style2{
            cursor: pointer;
            background:#3d93f5;
            border-radius: 4px;
            color:#fff;
            padding:12px 16px 8px;
            display: inline-block;
        }
        .row-title{
            display: flex;
            justify-content: space-between;
            color: #474747;
            font-size: 16px;
            line-height: 40px;
            .blue {
                color: #385899;
            }
        }
        .iconright{
            font-size:16px; 
            color:#29a794; 
            margin-left:8px;
        }
        .iconwrong{
            font-size:14px; 
            color:#ff4240; 
            margin-left:8px;
        }
        .correct{
            font-size: 14px;
            color:#1277eb;
            border:1px solid #1277eb;
            padding:0px 2px;
            margin-left:10px;
            cursor: pointer;
        }
        .analysis-box{
            .analysis-title{
                color:#474747;
                font-weight: bold;
            }
            .analysis-content{
                color:#474747;
            }
        }
        //归档显示
        .showicon{
            display: none;
            .showicon-right{
                font-size:24px; 
                color:#29a794; 
                margin-left:8px;
            }
            .showicon-wrong{
                font-size:24px; 
                color:#ff4240; 
                margin-left:8px;
            }
        }
        //190717
        background: #f8f8f8;
        .stu-answer{
        }
        .markdown-body {
            font-size: 14px !important;
        }

        img{
            max-width:100%;
        }
        .underline {
            text-decoration: underline;
        }
        .font16 {
            font-size: 16px;
            line-height: 40px;
        }
        //选择题答案下划线
        .chose-item {
        }
        .question-score {
            .el-input {
                width: auto;
                .el-input__inner {
                    width: 58px;
                }
            }
        }
        .preview-top {
            position: relative;
            z-index: 1;
            height: 65px;
            margin: 0px auto 0;
            .preview-top1 {
                width: 100%;
                height: 60px;
                line-height: 60px;
                background: #101937;
                position: fixed;
                top: 0;
                color: #fff;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    span {
                        margin-right: 40px;
                    }
                    .preview-title {
                        font-size: 18px;
                        margin-right: 0;
                    }
                    .preview-line {
                        margin: 0 6px;
                    }
                }
            }
            .preview-top2 {
                margin-top:0;
                width: 100%;
                line-height: 80px;
                position: fixed;
                top: 60px;
                padding: 0;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    padding: 0 40px;
                    .button-style {
                        margin-left: 20px;
                    }
                    .download-pdf{
                        float: left;
                        cursor: pointer;
                    }
                }
                .preview-top-content2 {
                    width: 1200px;
                    margin: 0 auto;
                    line-height: 30px;
                    padding-bottom: 30px;
                }
            }
        }
        .preview-content {
            width: 1200px;
            margin: 40px auto 20px;
            color: $title-gray;
            padding: 0 40px;
            overflow: hidden;
            // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            p {
                display: inline;
            }
            .tq-title {
                color: $title-gray;
                font-size: 16px;
                line-height: 40px;
            }
            dl {
                padding-left: 20px;
            }
            dt,dd {
                font-size: 14px;
                //190717
                line-height: 24px;
                //190717
            }
                //190717
            dt {
                margin-bottom: 20px;
            }
            //190717
            dd {
                padding-left: 20px;
            }
            .btn-group {
                text-align: center;
                .button-style {
                    margin: 40px 5px;
                }
            }
        }
        .question-assess{
            // overflow: hidden;
            height: 150px;
            margin-top: 20px;
            margin-bottom: 45px;
            .title{
                // float: left;
                width: 4%;
                display: inline-block;
                vertical-align: top;
                font-size: 16px;
                color: #385899;
            }
            .el-textarea{
                // float: left;
                width: 90%;
                height: 150px;
                textarea{
                    resize:none;
                }
            }
        }
        #question-content{
            .answerCount-content{
                margin:10px 0 0 0;
                padding:0px 0 40px 0;
                border-bottom:1px dashed #e8e9ea;
                .answerCount-box{
                    width: 800px;
                    display: flex;
                    align-items: center;
                    padding: 20px;
                    border:2px solid #e8e9ea;
                    box-sizing: border-box;
                    .answerCount-hd{
                        margin:0 20px 0 0;
                    }
                    .answerCount-progress{
                        margin:0 0 0 20px;
                        width:300px;
                    }
                }
            }
            .iconright{
                font-size:16px; 
                color:#29a794; 
                margin-left:8px;
            }
            .iconwrong{
                font-size:14px; 
                color:#ff4240; 
                margin-left:8px;
            }
            .correct{
                font-size: 14px;
                color:#1277eb;
                border:1px solid #1277eb;
                padding:0px 2px;
                margin-left:10px;
                cursor: pointer;
            }
            .analysis-box{
                .analysis-title{
                    color:#474747;
                    font-weight: bold;
                }
                .analysis-content{
                    color:#474747;
                }
            }
            //归档显示
            .showicon{
                display: none;
                .showicon-right{
                    font-size:24px; 
                    color:#29a794; 
                    margin-left:8px;
                }
                .showicon-wrong{
                    font-size:24px; 
                    color:#ff4240; 
                    margin-left:8px;
                }
            }
            //190717
            background: #fff;
            .stu-answer{
            }
            .markdown-body {
                font-size: 14px !important;
            }

            img{
                max-width:100%;
            }
            .underline {
                text-decoration: underline;
            }
            .font16 {
                font-size: 16px;
                line-height: 40px;
            }
            //选择题答案下划线
            .chose-item {
            }
            .question-score {
                .el-input {
                    width: auto;
                    .el-input__inner {
                        width: 58px;
                    }
                }
            }
            .preview-top {
                position: relative;
                z-index: 1;
                height: 120px;
                margin: 0px auto 0;
                .preview-top1 {
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    background: #101937;
                    position: fixed;
                    top: 0;
                    color: #fff;
                    font-size: 14px;
                    .preview-top-content {
                        width: 1200px;
                        margin: 0 auto;
                        span {
                            margin-right: 40px;
                        }
                        .preview-title {
                            font-size: 18px;
                            margin-right: 0;
                        }
                        .preview-line {
                            margin: 0 6px;
                        }
                    }
                }
                .preview-top2 {
                    margin-top:0;
                    width: 100%;
                    line-height: 80px;
                    position: fixed;
                    top: 60px;
                    padding: 0;
                    font-size: 14px;
                    .preview-top-content {
                        width: 1200px;
                        margin: 0 auto;
                        padding: 0 40px;
                        .button-style {
                            margin-left: 20px;
                        }
                        .download-pdf{
                            float: left;
                            cursor: pointer;
                        }
                    }
                    .preview-top-content2 {
                        width: 1200px;
                        margin: 0 auto;
                        line-height: 30px;
                        padding-bottom: 30px;
                    }
                }
            }
            .preview-content {
                width: 1200px;
                margin: 40px auto 20px;
                color: $title-gray;
                padding: 0 40px;
                overflow: hidden;
                //box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                box-shadow: 0 0 10px rgba(0,0,0,0.05)
                p {
                    display: inline;
                }
                .tq-title {
                    color: $title-gray;
                    font-size: 16px;
                    line-height: 40px;
                }
                dl {
                    padding-left: 20px;
                }
                dt,dd {
                    font-size: 14px;
                    //190717
                    line-height: 24px;
                    //190717
                }
                    //190717
                dt {
                    margin-bottom: 20px;
                }
                //190717
                dd {
                    padding-left: 20px;
                }
                .btn-group {
                    text-align: center;
                    .button-style {
                        margin: 40px 5px;
                    }
                }
            }
            .question-assess{
                // overflow: hidden;
                height: 150px;
                margin-top: 20px;
                margin-bottom: 45px;
                .title{
                    // float: left;
                    width: 4%;
                    display: inline-block;
                    vertical-align: top;
                    font-size: 16px;
                    color: #385899;
                }
                .el-textarea{
                    // float: left;
                    width: 90%;
                    height: 150px;
                    textarea{
                        resize:none;
                    }
                }
            }
        }
    }
</style>
